<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-button icon="el-icon-plus" type="success" circle size="mini" @click="showSave(1)"></el-button>
            <el-button icon="el-icon-edit" type="warning" circle size="mini" @click="showSave(2)"></el-button>
            <el-button icon="el-icon-minus" type="danger" circle size="mini" @click="remove"></el-button>
        </div>

        <div class="content">
            <el-tree :data="data" :props="defaultProps" default-expand-all highlight-current @node-click="handleNodeClick"></el-tree>
        </div>

        <el-dialog title="保存商品分类" :visible.sync="dialogVisible" width="450px" append-to-body>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="mini">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="form.name" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="排序码" prop="sort">
                        <el-input-number v-model="form.sort" :min="0" style="width: 200px"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="validate" size="mini">保 存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {categoryTree, addCategory, modifyCategory, removeCategory} from '@/api/goods/goods-category'

    export default {
        name: 'GoodsCategory',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selected: null,
                form: {
                    parentId: 0,
                    depth: 1,
                    name: '',
                    sort: 0
                },
                rules: {
                    name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, message: '请输入排序码', trigger: 'blur' }
                    ],
                }
            }
        },
        mounted() {
            this.loadList()
        },
        methods: {
            async loadList() {
                this.loading = true
                let res = await categoryTree()
                this.loading = false
                if (res.code !== "0") return
                this.data = res.data
            },
            showSave(type) {
                if (type === 2) {
                    if (this.selected === null || this.selected.id === '0') {
                        return this.$message({
                            message: '请先选择一个商品分类',
                            type: 'warning'
                        });
                    }
                    this.dialogVisible = true
                    this.form.name = this.selected.name
                    this.form.sort = this.selected.sort
                } else {
                    this.selected = null
                    this.dialogVisible = true;
                }
            },
            validate() {
                let _this = this
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        _this.saveIng();
                    } else {
                        return false;
                    }
                });
            },
            async saveIng() {
                this.loading = true;
                let res;
                if (this.selected) {
                    res = await modifyCategory(this.selected.id, this.form)
                } else {
                    res = await addCategory(this.form);
                }
                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.$refs.form.resetFields();
                this.dialogVisible = false
                this.loadList()
            },
            handleNodeClick(data) {
                this.selected = data.id !== '0' ? data : null
            },
            remove() {
                if (this.selected === null || this.selected.id === '0') {
                    return this.$message({
                        message: '请先选择一个商品分类',
                        type: 'warning'
                    });
                }
                this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.removeIng(this.selected.id);
                });
            },
            async removeIng(id) {
                this.loading = true;
                let res = await removeCategory(id);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loadList()
            }
        }
    }
</script>

<style scoped>
    >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #cde6c7;
    }
</style>